<template>
<div class="class-edit">
    <el-dialog :title="title" ref="editDiaglog" :visible.sync="newEditFormDialog" width="500px" :close-on-click-modal='false' :before-close="cancel">

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="用户名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="password" v-if="!ruleForm.id">
                <el-input v-model="ruleForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="选择角色" prop="roleId">
                <el-select v-model="ruleForm.roleId" placeholder="请选择角色">
                    <el-option :label="item.name" :value="item.id" v-for="(item,index) in roleList" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <div class="class-edit-button-footerRight">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" v-if="ruleForm.id" @click="submitForm('ruleForm')">确认修改</el-button>
                    <el-button type="primary" v-else @click="submitForm('ruleForm')">确认添加</el-button>

                </div>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</template>

<script>
import Bus from './Bus'
import Api from '@/api/Api'
export default {
    name: 'edit',
    props: {
        editData: Object,
        editFormDialog: Boolean,
        roleList: Array
    },
    data() {
        return {
            // 规则
            ruleForm: {
                name: this.editData.name,
                roleId: this.editData.roleId,
                //根据id判断是否编辑还是修改
                id: this.editData.id
            },
            rules: {
                name: [{
                        required: true,
                        message: '请输入角色名称',
                        trigger: 'blur'
                    },
                    {
                        min: 2,
                        max: 20,
                        message: '长度在 2 到 20 个之间',
                        trigger: 'blur'
                    }
                ],
                password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        max: 18,
                        message: '长度在 6 到 18 个之间',
                        trigger: 'blur'
                    }
                ],
                roleId: [{
                    required: true,
                    message: '请选择角色',
                    trigger: 'change'
                }],
            },
            newEditFormDialog: this.editFormDialog
        };
    },
    methods: {
        cancel() {
            this.ruleForm.name = this.editData.name;
            this.ruleForm.password = this.editData.password;
            this.ruleForm.roleId = this.editData.roleId;
            this.ruleForm.id = this.editData.id;
            this.newEditFormDialog = false
        },
        submitForm(formName) {
            var this_ = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //挂载Bus 开启加载中...
                    Bus.$emit('open-v-loading')
                    //发起请求 判断是否为编辑或者新增
                    if (this_.ruleForm.id != undefined && this_.ruleForm.id != '') {
                        Api.user.modify(this_.ruleForm).then(res => {
                            if (res.data.code === 0) {
                                //成功框
                                this.newEditFormDialog = false
                                Bus.$emit('close-v-loading', res.data.msg)
                            } else {
                                this.newEditFormDialog = false
                                Bus.$emit('close-v-loading', res.data.msg, 'error')
                            }
                        }).catch(e => {
                            this.newEditFormDialog = false
                            Bus.$emit('close-v-loading', '网络超时,请稍后重试', 'error')
                        })
                    } else {
                        let params = this_.ruleForm

                        Api.user.add(params).then(res => {
                            if (res.data.code === 0) {
                                //成功框
                                this.newEditFormDialog = false
                                Bus.$emit('close-v-loading', res.data.msg)
                            } else {
                                this.newEditFormDialog = false
                                Bus.$emit('close-v-loading', res.data.msg, 'error')
                            }
                        }).catch(e => {
                            this.newEditFormDialog = false
                            Bus.$emit('close-v-loading', '网络超时,请稍后重试', 'error')
                        })
                    }

                } else {
                    return false;
                }
            });
        }
    },
    watch: {
        editData() {
            this.ruleForm.name = this.editData.name;
            this.ruleForm.roleId = this.editData.roleId;
            this.ruleForm.id = this.editData.id;
        },
        editFormDialog() {
            //监听只要传过来的值有效，就打开dialog框
            this.newEditFormDialog = true
        }
    },
    computed: {
        title() {
            return this.ruleForm.id ? '编辑' : '新增'
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
